<template>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			系统设置 / 地区管理 / 新增地区
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						广告类型
					</view>
					<u-form-item prop="type" :border-bottom="false">
						<u-checkbox-group  @change="changeType"   >
							<u-checkbox  v-model="item.checked" v-for="(item, index) in typeArr" :key="index" :name="item.value">
								{{ item.name }}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						展示城市
					</view>
					<u-form-item prop="tags" :border-bottom="false">
					<uni-data-picker  popup-title="展示城市" :localdata="city" v-model="form.city" @change="changeCity" >
						<view  class="selected">
							<u-form-item prop="tags" :border-bottom="false"  style="" >
								<view class="u-form-input-slot">
									<text v-if="form.city==0" > 全部 </text>
									<text v-else :class="!form.city?'uni-global-label':''">
										<text>{{ form.city?form.city:'展示城市' }}</text>
									</text>
									<text class="iconfont icon-xiajiantou" style="color:#c0c4cc" ></text>
								</view>
							</u-form-item>
						</view>
					</uni-data-picker>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						广告标题
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input"  v-model="form.title" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						广告排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input"  v-model="form.sort" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						广告图片
					</view>
					<u-form-item prop="image" :border-bottom="false">
						<uni-file-picker 
							v-model="image" file-mediatype="image"
							:image-styles="{width:'405',height:'200'}"
							limit="1"
							@success="successImage"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				
				
				
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import {rules, typeArr } from "/common/js_file/advert.js" ;
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			let form = {
				"image":'',
				"title":'',
				"type":[1,2],
				"is_show":1,
				"city":'0',
				"sort":""
			}
			return {
				form,
				rules,
				typeArr,
				image:[],// 广告图片
				city:[], // 城市
			};
		},
		onLoad(val) {
			this.form.sort = parseInt(val.total) + 1; 
			this.getGity() ;
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.add( this.form );
					} else {
						
					}
				});
			},
			add(form){
				form.sort = parseInt(form.sort);
				// return console.log(form)
				global.addData('advert',form).then(res =>  {
					this.$refs.uToast.show({title: '添加成功',type: 'success',
						duration:500,position:'top',
						url: '/pages/system/advert/advert'
					})
				})
			},
			successImage(event){
				let filePath = event.tempFilePaths[0];
				this.form.image = filePath;
			},
			// 获取城市列表
			getGity(){
				global.getList('city',{},"sort asc","title as text,_id,title as value",0,999).then( result =>{
					this.city = result.data;
					this.city.unshift({ text:'全部',value:0 })
				} )
			},
			changeCity(ev){
				this.form.city = ev.detail.value[0].value;
			},
			// 广告类型
			changeType(ev){
				this.form.type = ev ;
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.body{
		width: 50%;
	}
</style>
